<template>
  <div class="broke-rage">
    <transition
      name="slide-fade" mode="out-in"
    >
      <custom-container v-if="!detailVisible">
        <custom-container-body>
          <el-table :data="tableData.commInfo" :loading="loading" element-loading-text="加载中..." border border-radius
                    @sort-change="sortChange"
          >
            <el-table-column
              align="center"
              prop="settle_date"
              label="日期">
            </el-table-column>

            <el-table-column
              align="center"
              prop="bonusUser"
              label="会员佣金">
              <template slot-scope="{row}">
                <el-button type="link" size="small"
                           @click="openDetail({detailName: 'low-member-detail', props: {row, filters,modeInfo:tableData.modeInfo}})"
                >
                  {{row.comm_amount | currency}}
                </el-button>
              </template>
            </el-table-column>

            <el-table-column
              align="center"
              prop="bonus"
              label="下级代理佣金">
              <template slot-scope="{row}">
                <el-button type="link" size="small"
                           @click="openDetail({detailName: 'low-proxy', props: {row, filters,modeInfo:tableData.modeInfo}})"
                >
                  {{row.proxy_comm | currency}}
                </el-button>
              </template>
            </el-table-column>

            <!--<el-table-column-->
              <!--align="center"-->
              <!--label="上分金额">-->
              <!--<template slot-scope="{row}">-->
                <!--{{row.add_amount | currency}}-->
              <!--</template>-->
            <!--</el-table-column>-->

            <el-table-column
              align="center"
              label="上分返利">
              <template slot-scope="{row}">
                {{row.upamount_ret | currency}}
              </template>
            </el-table-column>

            <el-table-column
              align="center"
              label="发放佣金总计">
              <template slot-scope="{row}">
                <money-text :value="Number(row.amount)"></money-text>
              </template>
            </el-table-column>

            <el-table-column
              align="center"
              prop="rebate"
              label="发放状态">
              <template slot-scope="{row}">
                {{Number(row.status) | toConverter('COMMISSION_STATUS')}}
              </template>
            </el-table-column>

            <template slot="empty">
              <div class="el-table__empty">
                <svg-icon class="el-table__empty-icon" icon-class="grid-empty-2"></svg-icon>
                <div class="el-table-text">暂无数据</div>
              </div>
            </template>
          </el-table>
          <div class="el-pagination-container">
            <el-warning align="top">
              注意事项：<br/>
              1.会员佣金为负数，实际发放金额=下级代理佣金+上分返利<br/>
              2.会员佣金为正数，实际发放金额=会员佣金+下级代理佣金+上分返利
            </el-warning>
          </div>
        </custom-container-body>
      </custom-container>
      <component
        :is="detailName"
        :info="detailProps"
        v-else
      ></component>
    </transition>
  </div>
</template>

<script type="text/jsx">

  import {commissionReportApi as getApi} from '@/services/api/report';

  import {detailContent, grid} from '@/build';

  import LowMemberDetail from './low-member-detail';
  import LowProxy from './low-proxy';

  export default {
    name: "broke-rage",

    mixins: [detailContent, grid],

    components: {
      LowMemberDetail,
      LowProxy
    },

    data() {
      return {
        filters: {},
        tableData: [],
      };
    },

    mounted() {
      this.bindGet(getApi, 'tableData', {
        action: 'getGrid',
        sendingData: 'filters'
      });

      this.getAll();
    }
  };

</script>

<style lang="scss" scoped>
  @include b(broke-rage) {
    min-height: 300px;
  }
</style>

